<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>三级联动</title>
</head>
<body>
	<select name="" id="sel1">
		<option value="">请选择</option>
	</select>
	<select name="" id="sel2">
		<option value="">请选择</option>
	</select>
	<select name="" id="sel3">
		<option value="">请选择</option>
	</select>

	<script>


	/*
		当点省的时候，获取对应的选中的value值，将该值与城市的parent进行对比，如果相等，则生成相应的城市，覆盖掉原有的城市


	*/
		var sel1 = document.getElementById('sel1');
		var sel2 = document.getElementById('sel2');
		var sel3 = document.getElementById('sel3');

		var p = [
			{
				id:1,
				name:"河南"
			},{
				id:2,
				name:"湖南"
			},{
				id:3,
				name:"山西"
			}
		]

		var c = [
			{	
				id:4,
				name:"郑州",
				parent:1
			},{
				id:5,
				name:"洛阳",
				parent:1
			},{
				id:6,
				name:"长沙",
				parent:2
			},{
				id:7,
				name:"岳阳",
				parent:2
			},{
				id:8,
				name:"太原",
				parent:3
			},{
				id:9,
				name:"大同",
				parent:3
			}
		]


		var d = [
			{
				name:"高新区",
				parent:4
			},{
				name:"金水区",
				parent:4
			},{
				name:"上街区",
				parent:4
			},{
				name:"管城区",
				parent:4
			},{
				name:"洛龙区",
				parent:5
			},{
				name:"洛2",
				parent:5
			}
		]
		var html = "<option value=\"请选择\">请选择</option>";
		for(var i = 0;i<p.length;i++){
			// p[i]指代数组中每一个对象
			html+="<option value='"+p[i].id+"'>"+p[i].name+"</option>"
		}
		console.log(html);
		sel1.innerHTML = html;


		sel1.onchange = function(){
			var val = this.value;
			console.log(val);
			var html = "<option value=\"请选择\">请选择</option>";
			for(var i = 0;i<c.length;i++){
				if(c[i].parent == val){
					html+="<option value='"+c[i].id+"'>"+c[i].name+"</option>"
				}
			}
			sel2.innerHTML = html;
			sel3.innerHTML = "<option value=\"请选择\">请选择</option>"
		}


		sel2.onchange = function(){
			var val = this.value;
			var html = "<option value='请选择'>请选择</option>"
			for(var i = 0;i<d.length;i++){
				if(d[i].parent == val){
					html+="<option value='"+d[i].name+"'>"+d[i].name+"</option>"
				}
			}
			sel3.innerHTML = html;
		}
		/*var html2 = "<option value=\"请选择\">请选择</option>";
		for(var i = 0;i<c.length;i++){
			if(c[i].parent == 2){
				html2+="<option value='"+c[i].name+"'>"+c[i].name+"</option>"
			}
		}
		sel2.innerHTML = html2;*/



	</script>


</body>
</html>